<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>创建一个函数式组件</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>
    <!--准备好一个容器-->
    <div id="test"></div>
    <!--引入react核心库,核心库必须先引入-->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!--引入react-dom, 用于支持react操作DOM-->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="./js/babel.min.js"></script>


    <script type="text/babel">

    /*
     老师总结：
     1）state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）

     2) 组件被称为"状态机"，通过更新组件的state来更新对应的页面显示（重新渲染组件）

     3）组件中render方法中的this为组件(类)实例对象

     4）组件自定义的方法中this 为undedined  ,解决办法

        a)强制绑定this,通过函数对象的bind（）
        b）写成赋值形式+箭头函数

    5)状态数据，需要更新修改时的用 setState()
          


    */

     //1.创建组件
      class Weather extends React.Component{
         //类中可以直接写赋值语句，赋值语句在类中是直接放在类的实例对象上的
        //下面的代码属于赋值语句，所以是直接放在了类Weather的原型对象上，所以就可以不写constructor里面了
        state={isHot:true,}

        render(){ 
            console.log(this) //类的实例对象
            const {isHot} =this.state 
            return <h1 ois.demo}>今天的天气很{isHot ? '凉爽' : '炎热'}</h1>
        }nClick ={th
        
        //自定义方法 ---要用赋值语句的形式+箭头函数,如果写成普通的函数，会定义在Weather的原型上
        //自定义函数写成普通写法，会放在类的原型上，按赋值语句加箭头函数写法，会放在类的实例对象身上
        demo=()=>{
            console.log(this) // Weather实例对象
            const isHot = this.state.isHot 
            this.setState({isHot:!isHot})

        }
   
       
      //类中可以直接写赋值语句，赋值语句在类中是直接放在类的实例对象上的
     // a=1
      }

    //渲染页面
    ReactDOM.render(<Weather/>,document.getElementById("test"))

    </script>




</body>

</html>